<template>
    <childLayout activeType="vip" :activeIdx="0">
        <div class="child-content">
            <div class="mine-info-label">我的资料</div>
            <div class="info-form">
                <el-form ref="form" :model="formData" size="large" label-width="150px">
                    <el-form-item label="用户名称" prop="nickname">
                        <el-input v-model="formData.nickname" placeholder="请输入用户名称" style="width: 400px"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone">
                        <el-input v-model="formData.phone" placeholder="请输入手机号码" style="width: 400px"></el-input>
                    </el-form-item>
                    <el-form-item label="会员等级" prop="level">
                        <el-input v-model="formData.level" disabled style="width: 400px"></el-input>
                    </el-form-item>
                    <el-form-item label="邀请码" prop="inviteCode">
                        <el-input v-model="formData.inviteCode" disabled style="width: 400px"></el-input>
                    </el-form-item>
                    <el-form-item label="用户身份" prop="userType">
                        <el-select v-model="formData.userType" placeholder="请选择" style="width: 400px" class="self-form-select">
                            <el-option value="1" label="学生">学生</el-option>
                            <el-option value="2" label="白领">白领</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="学校和专业" prop="schoolAndMajor">
                        <el-input v-model="formData.schoolAndMajor" placeholder="请输入学校和专业" style="width: 400px"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="formData.email" placeholder="请输入邮箱" style="width: 400px"></el-input>
                    </el-form-item>
                    <el-form-item label="QQ" prop="qq">
                        <el-input v-model="formData.qq" placeholder="请输入QQ" style="width: 400px"></el-input>
                    </el-form-item>
                    <el-form-item label="注册时间" prop="registerTime">
                        <el-input v-model="formData.registerTime" disabled style="width: 400px"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="to-submit-btn">
                <el-button type="primary" @click="handleSubmit">保存</el-button>
            </div>
        </div>
    </childLayout>
</template>

<script setup>
import childLayout from "@/layout/childLayout";

const formData = ref({
    nickname: 'liuhuajin',
    phone: '13723467352',
    level: '月卡会员',
    inviteCode: 'XG0568',
    userType: '1',
    schoolAndMajor: '湖南大学软件工程',
    email: '23fwee@163.com',
    qq: '1234556789',
    registerTime: '2021-10-10 10:10:10'
})

const handleSubmit = () => {
    console.log(formData.value)
}
</script>

<style lang="scss" scoped>
.mine-info-label {
    color: rgba(5, 11, 32, 1);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(226, 232, 240, 1);
    margin-bottom: 24px;
}

.to-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 24px;
    border-top: 1px solid rgba(226, 232, 240, 1);
}

.info-form {

    &::v-deep .el-input__wrapper {
        border-radius: 30px;
    }
    &::v-deep .el-select__wrapper {
        border-radius: 30px;
    }

    &::v-deep .el-form-item__label {
        color: rgba(5, 11, 32, 1);
        font-size: 16px;
        font-weight: 500;
        text-align: left;
        justify-content: flex-start;
    }
}
</style>